<script>
  import { cards } from "./store";
  // 定义变量
  export let title; // 标题
  export let content; // 内容
  export let creationTime; // 创建日期
  export let index = 0; // 卡片序号

  // 删除卡片
  function doDelete() {
    cards.update((item) => {
      item.splice(index, 1);
      return item;
    });
  }
</script>

<style>
  .card {
    padding: 1rem;
    margin: 1rem;
    color: #fff;
    border-radius: 0.5rem;
    background: linear-gradient(to right,#fbc2eb, #a6c1ee);
    position: relative;
    /* width: 0%; */
  }

  .title {
    font-size: 20px;
  }

  .creationTime {
    font-size: 12px;
  }

  .show {
    background-color: red;
  }

  .del-btn {
    position: absolute;
    top: -4px;
    right: 8px;
    cursor: pointer;
  }

  /* 当鼠标移到卡片上，展示删除按钮 */
  .card:hover .del-btn {
    opacity: 1;
  }
</style>

<div class={`card`}>
  <div class="title">
    {title}
    <span class="del-btn" on:click={doDelete}>x</span>
  </div>
  <div class="content">{content}</div>
  <div class="creationTime">{creationTime}</div>
</div>
